<template>
  <div>
    <div class="website-page-header">
      <div class="hd-left">
        <a-icon type="arrow-left" @click="$router.go(-1)" class="icon-pic" />
      </div>
      <div class="hd-center" @click="openMusic">
        <img src="~@/assets/img/website/create/music.png" alt="" style="margin-right: 7px; width: 44px; height: 44px" />
        <span>背景音乐</span>
      </div>
      <div class="hd-right">
        <a-button type="primary" @click="saveWebsite">保存</a-button>
      </div>
    </div>
    <div class="container-box">
      <div class="left-container">
        <div class="pd24 scroll-y component-choose-page">
          <h3 class="navigation-title">导航信息</h3>
          <div class="choose-item" v-for="(item, index) in navigationTag" :key="index" @click="leftTagClick(item)">
            <div class="choose-item-icon">
              <img :src="item.url" />
            </div>
            <div class="choose-item-name">{{ item.name }}</div>
          </div>
          <h3 class="navigation-title">机构信息</h3>
          <div class="choose-item" v-for="(item, index) in orgazinTag" :key="index + 10" @click="leftTagClick(item)">
            <div class="choose-item-icon">
              <img :src="item.url" />
            </div>
            <div class="choose-item-name">{{ item.name }}</div>
          </div>
          <h3 class="navigation-title">营销工具</h3>
          <div class="choose-item" v-for="(item, index) in MarketingTag" :key="index + 50" @click="leftTagClick(item)">
            <div class="choose-item-icon">
              <img :src="item.url" />
            </div>
            <div class="choose-item-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="center-container">
        <div class="center-content">
          <div class="view-area-title" :class="{ choose: rightData.titleFalg }" @click="changeTitle">
            {{ weSiteData.title }}
          </div>
          <div class="view-item-wrapper">
            <img src="~@/assets/img/website/1.png" class="under-item-image" />
            <draggable v-model="weSiteData.showData" @end="onEnd">
              <div
                class="view-area-item-new"
                :class="{ choose: index == listIndex, mt16: index > 0 }"
                v-for="(item, index) in weSiteData.showData"
                :key="index"
                @click="listClick(item, index)"
              >
                <div class="swiper-image-component" v-if="item.type == 1">
                  <div class="carousal-content">
                    <div v-if="item.rotationChart.length == 0" class="no-content">
                      <img
                        src="~@/assets/img/website/defaultAdv.png"
                        style="width: 100%; height: 100%"
                      />
                    </div>
                    <div v-if="item.rotationChart.length > 0" class="carousel-list">
                      <swiper ref="mySwiper" :options="swiperOption" style="height: 100%">
                        <swiper-slide v-for="(val, j) in item.rotationChart" :key="j">
                          <img :src="val.url" alt="" style="width: 100%; height: 100%" />
                        </swiper-slide>
                        <div class="swiper-pagination" slot="pagination"></div>
                      </swiper>
                    </div>
                  </div>
                </div>
                <div class="graphic-component" v-if="item.type == 2">
                  <div class="graphic-item" v-for="(val, j) in item.navigationList" :key="j">
                    <img :src="val.url" alt="" />
                    <div class="text">{{ val.title }}</div>
                  </div>
                </div>
                <div class="address-component" v-if="item.type == 3">
                  <div class="address-component-content">
                    <img :src="item.addressInfo.banner" alt="" class="address-image" />
                    <div>
                      <div class="address-component-right">
                        <div class="inst-name">{{ item.addressInfo.name }}</div>
                        <!-- <img src="" alt="" v-if="item.addressInfo.contactPhone"/> -->
                        <span
                          class="iconfont icon-dianhua"
                          style="color: #1890ff; font-size: 18px"
                          v-if="item.addressInfo.contactPhone"
                        />
                      </div>
                      <div class="address-component-right">
                        <div class="inst-address">{{ item.addressInfo.address }}{{ item.addressInfo.street }}</div>
                        <span
                          class="iconfont icon-ditu"
                          style="color: #19be6b; font-size: 18px"
                          v-if="item.addressInfo.address"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="learn-more" v-if="item.addressInfo.subCampus.length > 0">
                    更多校区
                    <a-icon
                      type="right"
                      style="margin-left: 5px; color: #96a1ae !important; font-size: 13px !important"
                    />
                  </div>
                </div>
                <div class="image-text-component" v-if="item.type == 4">
                  <span class="theme-color-line"></span>
                  <div class="image-text-title">{{ item.name }}</div>
                  <template v-if="item.introInfo.cover_image && item.introInfo.intro">
                    <div class="image-box">
                      <img
                        :src="item.introInfo.cover_image"
                        alt="品牌介绍"
                        style="width: 311px; height: 156px; border-radius: 5px"
                      />
                    </div>
                    <div class="image-text-desc">{{ item.introInfo.intro }}</div>
                  </template>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置品牌介绍</div>
                  </div>
                </div>
                <div class="hot-course-component" v-if="item.type == 5">
                  <span class="theme-color-line"></span>
                  <div class="hot-course-hd">
                    <div class="image-text-title">{{ item.name }}</div>
                    <div
                      style="font-size: 13px; font-weight: 400; color: #96a1ae"
                      v-if="item.hotCourse.length > item.showNumber"
                    >
                      更多
                      <a-icon type="right" />
                    </div>
                  </div>
                  <template v-if="item.hotCourse.length > 0">
                    <div
                      class="hot-course-content"
                      v-for="(val, i) in item.hotCourse"
                      :key="i"
                      v-if="i < item.showNumber"
                      :class="{ 'br-btm': i != item.hotCourse.length - 1 }"
                    >
                      <template>
                        <img :src="val.cover_image" alt="" />
                        <div class="hot-course-desc">
                          <div class="name">{{ val.name }}</div>
                          <div class="intro" v-if="item.showIntroFlag">{{ val.intro }}</div>
                        </div>
                      </template>
                    </div>
                  </template>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置热门课程</div>
                  </div>
                </div>
                <div class="teacher-team-component" v-if="item.type == 6">
                  <span class="theme-color-line"></span>
                  <div class="center-hd-top">
                    <div class="image-text-title">{{ item.name }}</div>
                    <div
                      style="font-size: 13px; font-weight: 400; color: #96a1ae"
                      v-if="item.teacherTeam.length > item.showNumber"
                    >
                      更多
                      <a-icon type="right" />
                    </div>
                  </div>
                  <div class="teacher-team-content" v-if="item.teacherTeam.length > 0">
                    <div class="teacher-team-item" v-for="(val, i) in item.teacherTeam" :key="i" v-if="i < item.showNumber">
                      <template >
                        <img :src="val.cover_image" alt="" class="teacher-item-img" />
                        <div class="teacher-item-name">{{ val.name }}</div>
                        <div class="teacher-item-desc" v-if="item.showIntroFlag">{{ val.intro }}</div>
                      </template>
                    </div>
                  </div>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置师资团队</div>
                  </div>
                </div>
                <div class="hot-course-component" v-if="item.type == 7">
                  <span class="theme-color-line"></span>
                  <div class="hot-course-hd">
                    <div class="image-text-title">{{ item.name }}</div>
                    <div
                      style="font-size: 13px; font-weight: 400; color: #96a1ae"
                      v-if="item.statStudent.length > item.showNumber"
                    >
                      更多
                      <a-icon type="right" />
                    </div>
                  </div>
                  <template v-if="item.statStudent.length > 0">
                    <div
                      class="hot-course-content"
                      v-for="(val, i) in item.statStudent"
                      :key="i"
                      :class="{ 'br-btm': i != item.statStudent.length - 1 }"
                      v-if="i < item.showNumber"
                    >
                      <img
                        :src="val.cover_image"
                        alt=""
                        style="width: 60px; height: 60px; background: #e6e6e6; border-radius: 50%"
                      />
                      <div class="hot-course-desc" style="margin-left: 12px">
                        <div class="name">{{ val.name }}</div>
                        <div class="many-intro" v-if="item.showIntroFlag">{{ val.intro }}</div>
                      </div>
                    </div>
                  </template>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置明星学员</div>
                  </div>
                </div>
                <div class="image-text-component" v-if="item.type == 8">
                  <span class="theme-color-line"></span>
                  <div class="image-text-title">{{ item.name }}</div>
                  <template v-if="item.schoolEnvironment.cover_image && item.schoolEnvironment.intro">
                    <div class="image-box">
                      <img
                        :src="item.schoolEnvironment.cover_image"
                        alt="品牌介绍"
                        style="width: 311px; height: 156px; border-radius: 5px"
                      />
                    </div>
                    <div class="image-text-desc">{{ item.schoolEnvironment.intro }}</div>
                  </template>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置校区环境</div>
                  </div>
                </div>
                <div class="active-component" v-if="item.type == 9">
                  <span class="theme-color-line"></span>
                  <div class="center-hd-top">
                    <div class="image-text-title">{{ item.name }}</div>
                    <div
                      style="font-size: 13px; font-weight: 400; color: #96a1ae"
                      v-if="item.elegantActivities.length > item.showNumber"
                    >
                      更多
                      <a-icon type="right" />
                    </div>
                  </div>

                  <template v-if="item.elegantActivities.length > 0">
                    <div
                      class="activity-view-item"
                      :class="{ 'br-btm': i != item.elegantActivities.length - 1 }"
                      v-for="(val, i) in item.elegantActivities"
                      :key="i"
                      v-if="i < item.showNumber"
                    >
                      <img :src="val.cover_image" alt="" />
                      <div class="activity-view-name">{{ val.name }}</div>
                    </div>
                  </template>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置风采活动</div>
                  </div>
                </div>
                <div class="active-component" v-if="item.type == 10">
                  <span class="theme-color-line"></span>
                  <div class="center-hd-top">
                    <div class="image-text-title">{{ item.name }}</div>
                    <div
                      style="font-size: 13px; font-weight: 400; color: #96a1ae"
                      v-if="item.LearningMaterials.length > item.showNumber"
                    >
                      更多
                      <a-icon type="right" />
                    </div>
                  </div>

                  <template v-if="item.LearningMaterials.length > 0">
                    <div
                      class="activity-view-item"
                      :class="{ 'br-btm': i != item.LearningMaterials.length - 1 }"
                      v-for="(val, i) in item.LearningMaterials"
                      :key="i"
                      v-if="i < item.showNumber"
                    >
                      <img :src="val.cover_image" alt="" />
                      <div class="activity-view-name">{{ val.name }}</div>
                    </div>
                  </template>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置学习资料</div>
                  </div>
                </div>
                <div class="hot-course-component" v-if="item.type == 11">
                  <span class="theme-color-line"></span>
                  <div class="hot-course-hd">
                    <div class="image-text-title">{{ item.name }}</div>
                    <div
                      style="font-size: 13px; font-weight: 400; color: #96a1ae"
                      v-if="item.newsInfo.length > item.showNumber"
                    >
                      更多
                      <a-icon type="right" />
                    </div>
                  </div>
                  <template v-if="item.newsInfo.length > 0">
                    <div
                      class="hot-course-content"
                      v-for="(val, i) in item.newsInfo"
                      :key="i"
                      :class="{ 'br-btm': i != item.newsInfo.length - 1 }"
                      v-if="i < item.showNumber"
                    >
                      <template>
                        <img :src="val.cover_image" alt="" />
                        <div class="hot-course-desc">
                          <div class="news-name">{{ val.name }}</div>
                          <!-- <div class="intro" v-if="item.showIntroFlag">{{ val.intro }}</div> -->
                        </div>
                      </template>
                    </div>
                  </template>
                  <div class="inst-part-content--empty" v-else>
                    <img src="~@/assets/img/website/23.png" alt="" />
                    <div>未设置新闻动态</div>
                  </div>
                </div>
                <div
                  class="form-component-component"
                  :class="{ 'form-acive': item.giftToShopFlag || item.auditionFlag || item.fullReductionFlag }"
                  v-if="item.type == 12"
                >
                  <div class="trial">
                    <div
                      class="trial-content"
                      v-if="item.giftToShopFlag || item.auditionFlag || item.fullReductionFlag"
                    >
                      <div class="trial-content-desc">
                        <div class="decs-content" v-if="item.giftToShopFlag">
                          <div class="text">礼</div>
                          <div class="desc">{{ item.giftToShopText ? item.giftToShopText : '未设置' }}</div>
                        </div>
                        <div class="decs-content" v-if="item.auditionFlag">
                          <div class="text">免</div>
                          <div class="desc">{{ item.auditionText ? item.auditionText : '未设置' }}</div>
                        </div>
                        <div class="decs-content" v-if="item.fullReductionFlag">
                          <div class="text">减</div>
                          <div class="desc">{{ item.fullReductionText ? item.fullReductionText : '未设置' }}</div>
                        </div>
                      </div>
                      <div class="trial-content-icon">
                        领取礼包
                        <span class="more">
                          <a-icon type="right" style="margin-left: 1px" />
                        </span>
                      </div>
                    </div>
                    <div class="form-button" v-else>{{ item.btnText }}</div>
                  </div>
                </div>
                <div class="image-text-component" v-if="item.type == 13">
                  <span class="theme-color-line"></span>
                  <div class="center-hd-top">
                    <div class="image-text-title">{{ item.name }}</div>
                    <div
                      style="font-size: 13px; font-weight: 400; color: #96a1ae"
                      v-if="item.activities.length > item.showNumber"
                    >
                      更多
                      <a-icon type="right" />
                    </div>
                  </div>
                  <div class="victoria-list">
                    <template v-if="item.activities.length > 0">
                      <div
                        class="victoria-list-item"
                        v-for="(val, j) in item.activities"
                        :key="j"
                        v-if="j < item.showNumber"
                      >
                        <img :src="val.template.cover" alt="" />
                        <div class="content-one">
                          <div class="title">{{ val.activity_title }}</div>
                          <div class="other">
                            <div class="time">
                              <countdown :startTime="val.start_time" :endTime="val.end_time"/>
                            </div>
                            <!-- <span class="more">
                              <a-icon type="right" style="font-size: 12px" />
                            </span> -->
                          </div>
                        </div>
                      </div>
                    </template>
                    <div class="inst-part-content--empty" v-else>
                      <img src="~@/assets/img/website/23.png" alt="" />
                      <div>未设置优惠活动</div>
                    </div>
                  </div>
                </div>
                <div class="view-actions">
                  <img
                    src="~@/assets/img/website/create/delete.png"
                    alt=""
                    :class="index == listIndex ? 'delete-actions' : 'actions-img'"
                    @click.stop="deleteList(item, index)"
                  />
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </div>
      <div class="create-site-side-right">
        <div class="operate-component">
          <div v-if="rightData.titleFalg">
            <div class="operate-edit-title">页面设置</div>
            <div class="operate-edit-subtitle">页面名称</div>
            <a-input
              placeholder="请输入标题"
              :maxLength="15"
              v-model="rightData.title"
              @change="titleChange"
              @blur="inputBlur"
            />
          </div>
          <div v-else-if="rightData.listFlag">
            <div v-if="rightData.rightContent.type == 1">
              <div class="operate-edit-title">轮播图</div>
              <div class="swiper-edit-scroll">
                <div class="opertate-edit-tip">最多可添加5张</div>
                <div class="opertate-edit-tip mb16">建议尺寸 680x240 像素</div>
                <template v-if="rightData.rightContent.rotationChart.length > 0">
                  <div
                    class="mb16 swiper-image-content"
                    v-for="(item, index) in rightData.rightContent.rotationChart"
                    :key="index"
                  >
                    <img :src="item.url" alt="" class="swiper-image" />
                    <img
                      src="~@/assets/img/website/create/delete.png"
                      style="position: absolute; right: -20px; top: 0; width: 17px; height: 17px; opacity: 0.5"
                      @click="deleteSwiperItem(item, index)"
                    />
                  </div>
                </template>
                <a-upload
                  :beforeUpload="beforeUpload"
                  ref="upload"
                  :show-upload-list="false"
                  accept=".jpg, .jpeg, .png, .gif, .svg"
                >
                  <div class="add-swiper-image mb16">+添加图片</div>
                </a-upload>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 2">
              <div class="operate-edit-title">图文导航</div>
              <div class="nav-set mb16">
                <div>最多可设置八个</div>
                <!-- <a>导航管理 <a-icon type="down" /></a> -->

                <a-dropdown v-model="visible" :trigger="['click']">
                  <a>导航管理 <a-icon type="down" /></a>
                  <a-menu slot="overlay">
                    <a-menu-item v-for="(item, index) in rightNavSet" :key="index" @click="navSetClick(item, index)">
                      <span style="margin-right: 8px"> {{ item.title }}</span
                      ><a-icon type="check" style="color: #1890ff" v-if="item.status" />
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
              <div class="info-edit-content">
                <draggable v-model="rightData.rightContent.navigationList">
                  <div class="inst-item" v-for="(item, index) in rightData.rightContent.navigationList" :key="index">
                    <div class="inst-item-content">
                      <img :src="item.url" alt="" />
                      <div>
                        <div>模块：{{ item.title }}</div>
                        <div>
                          链接：<a style="font-size: 12px">机构信息-{{ item.title }}</a>
                        </div>
                      </div>
                      <img
                        src="~@/assets/img/website/create/delete.png"
                        style="
                          position: absolute;
                          right: -35px;
                          top: 0;
                          font-size: 16px;
                          width: 18px;
                          height: 18px;
                          opacity: 0.5;
                        "
                        @click="deleteNavList(item, index)"
                      />
                    </div>
                  </div>
                </draggable>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 3">
              <div class="operate-edit-title">地址信息</div>
              <div class="inst-avatar">
                <div class="mb10">机构logo</div>
                <div class="upload-avatar">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :before-upload="beforeUploadAvatar"
                  >
                    <img
                      v-if="rightData.rightContent.addressInfo.banner"
                      :src="rightData.rightContent.addressInfo.banner"
                      style="width: 54px; height: 54px; object-fit: cover; border-radius: 5px"
                    />
                    <div v-else>
                      <a-icon type="plus" />
                      <div>上传logo</div>
                    </div>
                  </a-upload>
                </div>
              </div>
              <div class="operate-edit-subtitle">机构名称</div>
              <a-input placeholder="请输入标题" :maxLength="20" v-model="rightData.rightContent.addressInfo.name" />
              <div class="operate-edit-subtitle" style="margin-top: 20px">咨询电话</div>
              <a-input
                placeholder="请输入电话"
                :maxLength="20"
                v-model="rightData.rightContent.addressInfo.contactPhone"
              />
              <div class="operate-edit-subtitle" style="margin-top: 15px">机构地址</div>
              <div>
                {{ rightData.rightContent.addressInfo.address }}{{ rightData.rightContent.addressInfo.street }}
                <a style="margin-left: 8px" @click="editAddress(rightData.rightContent.addressInfo, 1)">{{
                  rightData.rightContent.addressInfo.address ? '修改' : '设置'
                }}</a>
              </div>
              <template v-if="rightData.rightContent.addressInfo.subCampus.length > 0">
                <div
                  class="subcampus-item"
                  v-for="(item, index) in rightData.rightContent.addressInfo.subCampus"
                  :key="index"
                >
                  <div class="subcampus-title">
                    <span class="">分校{{ index + 1 }}</span>
                    <span class="campus-del" @click="delSchool(item, index)">删除</span>
                  </div>
                  <div class="subcampus-content">
                    <div class="operate-edit-subtitle" style="margin-top: 15px">机构名称</div>
                    <a-input placeholder="请输入标题" :maxLength="20" v-model="item.name" />
                    <div class="operate-edit-subtitle" style="margin-top: 20px">咨询电话</div>
                    <a-input placeholder="请输入电话" :maxLength="20" v-model="item.contactPhone" />
                    <div class="operate-edit-subtitle" style="margin-top: 15px">机构地址</div>
                    <div>
                      {{ item.address }}{{ item.street }}
                      <a style="margin-left: 8px" @click="editAddress(item, 2, index)">{{
                        item.address ? '修改' : '设置'
                      }}</a>
                    </div>
                  </div>
                </div>
              </template>
              <div
                class="add-sub-inst-address-btn"
                :class="{ disabled: rightData.rightContent.addressInfo.subCampus.length == 4 }"
                @click="addSchool"
              >
                +添加分校区 {{ rightData.rightContent.addressInfo.subCampus.length }}/4
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 4">
              <div class="operate-edit-title">品牌介绍</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                />
              </div>
              <div class="mt16">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(1)">机构信息-品牌介绍</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 5">
              <div class="operate-edit-title">热门课程</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                />
              </div>
              <a-checkbox :checked="rightData.rightContent.showIntroFlag" @change="introChange">
                显示课程简介
              </a-checkbox>
              <div class="operate-edit-subtitle" style="margin-top: 10px">首页展示</div>
              <div class="mb8">
                前
                <a-input-number
                  v-model="rightData.rightContent.showNumber"
                  :min="1"
                  :max="10"
                  style="width: 60px; margin-left: 3px; margin-right: 3px"
                  @blur="showNumberChange"
                />
                个热门课程
              </div>
              <div class="opertate-edit-tip">首页最多可展示10个</div>
              <div class="opertate-edit-tip" style="margin-bottom: 24px">其余热门课程，家长可点击“更多”查看</div>
              <div class="operate-edit-subtitle">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(2)">机构信息-热门课程</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 6">
              <div class="operate-edit-title">师资团队</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                />
              </div>
              <a-checkbox :checked="rightData.rightContent.showIntroFlag" @change="introChange">
                显示老师简介
              </a-checkbox>
              <div class="operate-edit-subtitle" style="margin-top: 10px">首页展示</div>
              <div class="mb8">
                前
                <a-input-number
                  v-model="rightData.rightContent.showNumber"
                  :min="1"
                  :max="10"
                  style="width: 60px; margin-left: 3px; margin-right: 3px"
                  @blur="showNumberChange"
                />
                位老师
              </div>
              <div class="opertate-edit-tip">首页最多可展示10个</div>
              <div class="opertate-edit-tip" style="margin-bottom: 24px">其余师资团队，家长可点击“更多”查看</div>
              <div class="operate-edit-subtitle">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(3)">机构信息-师资团队</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 7">
              <div class="operate-edit-title">明星学员</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                  @blur="intorBlur(rightData.rightContent.type)"
                />
              </div>
              <a-checkbox :checked="rightData.rightContent.showIntroFlag" @change="introChange">
                显示学员简介
              </a-checkbox>
              <div class="operate-edit-subtitle" style="margin-top: 10px">首页展示</div>
              <div class="mb8">
                前
                <a-input-number
                  v-model="rightData.rightContent.showNumber"
                  :min="1"
                  :max="10"
                  style="width: 60px; margin-left: 3px; margin-right: 3px"
                  @blur="showNumberChange"
                />
                位学员
              </div>
              <div class="opertate-edit-tip">首页最多可展示10个</div>
              <div class="opertate-edit-tip" style="margin-bottom: 24px">其余明星学员，家长可点击“更多”查看</div>
              <div class="operate-edit-subtitle">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(4)">机构信息-明星学员</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 8">
              <div class="operate-edit-title">品牌介绍</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                  @blur="intorBlur(rightData.rightContent.type)"
                />
              </div>
              <div class="mt16">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(5)">机构信息-校区环境</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 9">
              <div class="operate-edit-title">活动风采</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                  @blur="intorBlur(rightData.rightContent.type)"
                />
              </div>
              <!-- <a-checkbox :checked="rightData.rightContent.showIntroFlag" @change="introChange">
                显示学员简介
              </a-checkbox> -->
              <div class="operate-edit-subtitle" style="margin-top: 10px">首页展示</div>
              <div class="mb8">
                前
                <a-input-number
                  v-model="rightData.rightContent.showNumber"
                  :min="1"
                  :max="10"
                  style="width: 60px; margin-left: 3px; margin-right: 3px"
                  @blur="showNumberChange"
                />
                个活动风采
              </div>
              <div class="opertate-edit-tip">首页最多可展示10个</div>
              <div class="opertate-edit-tip" style="margin-bottom: 24px">其余活动风采，家长可点击“更多”查看</div>
              <div class="operate-edit-subtitle">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(6)">机构信息-活动风采</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 10">
              <div class="operate-edit-title">学习资料</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                  @blur="intorBlur(rightData.rightContent.type)"
                />
              </div>
              <div class="operate-edit-subtitle" style="margin-top: 10px">首页展示</div>
              <div class="mb8">
                前
                <a-input-number
                  v-model="rightData.rightContent.showNumber"
                  :min="1"
                  :max="10"
                  style="width: 60px; margin-left: 3px; margin-right: 3px"
                  @blur="showNumberChange"
                />
                个学习资料
              </div>
              <div class="opertate-edit-tip">首页最多可展示10个</div>
              <div class="opertate-edit-tip" style="margin-bottom: 24px">其余学习资料，家长可点击“更多”查看</div>
              <div class="operate-edit-subtitle">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(7)">机构信息-学习资料</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 11">
              <div class="operate-edit-title">新闻动态</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                  @blur="intorBlur(rightData.rightContent.type)"
                />
              </div>
              <div class="operate-edit-subtitle" style="margin-top: 10px">首页展示</div>
              <div class="mb8">
                前
                <a-input-number
                  v-model="rightData.rightContent.showNumber"
                  :min="1"
                  :max="10"
                  style="width: 60px; margin-left: 3px; margin-right: 3px"
                  @blur="showNumberChange"
                />
                个新闻动态
              </div>
              <div class="opertate-edit-tip">首页最多可展示10个</div>
              <div class="opertate-edit-tip" style="margin-bottom: 24px">其余新闻动态，家长可点击“更多”查看</div>
              <div class="operate-edit-subtitle">内容来源</div>
              <div style="margin-top: 10px">
                <a @click="handerTab(8)">机构信息-新闻动态</a>
              </div>
            </div>
            <div v-if="rightData.rightContent.type == 12">
              <div class="operate-edit-title">预约试听</div>
              <div class="operate-edit-subtitle">按钮文字</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="请输入"
                  :maxLength="6"
                  v-model="rightData.rightContent.btnText"
                  @blur="intorBlur(rightData.rightContent.type)"
                />
              </div>
              <!-- <div class="operate-edit-subtitle">小程序底部悬浮展示”预约试听“入口</div>
              <a-switch v-model="rightData.rightContent.bottomStyle" /> -->
              <!-- <span style="color: #1890ff; cursor: pointer; margin-left: 10px">样式预览</span> -->
              <div class="operate-edit-subtitle" style="margin-top: 24px">设置预约试听礼</div>
              <div class="opertate-edit-sub-tip">选择设置相关礼包，填写礼包信息</div>
              <div class="opertate-edit-sub-tip">通过奖品刺激家长提交信息、到店体验</div>
              <a-checkbox v-model="rightData.rightContent.giftToShopFlag" style="margin: 8px 0"> 到店礼 </a-checkbox>
              <div class="mb16">
                <a-textarea
                  placeholder="专业测评一次/精美礼品一份"
                  v-model="rightData.rightContent.giftToShopText"
                  :rows="4"
                  :maxLength="30"
                />
              </div>

              <a-checkbox v-model="rightData.rightContent.auditionFlag" style="margin-bottom: 8px">
                免费试听
              </a-checkbox>
              <div class="mb16">
                <a-textarea
                  placeholder="45分钟的专业课程讲解"
                  v-model="rightData.rightContent.auditionText"
                  :rows="4"
                  :maxLength="30"
                />
              </div>
              <a-checkbox v-model="rightData.rightContent.fullReductionFlag" style="margin-bottom: 8px">
                满减
              </a-checkbox>
              <div class="mb16">
                <a-textarea
                  placeholder="满300减50"
                  v-model="rightData.rightContent.fullReductionText"
                  :rows="4"
                  :maxLength="30"
                />
              </div>
              <div class="operate-edit-subtitle">报名信息设置</div>
              <div class="opertate-edit-sub-tip">1、最多可设置5项</div>
            </div>
            <div v-if="rightData.rightContent.type == 13">
              <div class="operate-edit-title">优惠活动</div>
              <div class="operate-edit-subtitle">模块名称</div>
              <div class="edit-title-input-box">
                <a-input
                  placeholder="最多4个字"
                  :maxLength="4"
                  v-model="rightData.rightContent.name"
                  @change="intortitleChange"
                  @blur="intorBlur(rightData.rightContent.type)"
                />
              </div>
              <div class="operate-edit-subtitle" style="margin-top: 10px">首页展示</div>
              <div class="mb8">
                前
                <a-input-number
                  v-model="rightData.rightContent.showNumber"
                  :min="1"
                  :max="10"
                  style="width: 60px; margin-left: 3px; margin-right: 3px"
                  @blur="showNumberChange"
                />
                个优惠活动
              </div>
              <div class="opertate-edit-tip">首页最多可展示10个</div>
              <div class="opertate-edit-tip" style="margin-bottom: 24px">其余优惠活动，家长可点击“更多”查看</div>
              <div class="operate-edit-subtitle">内容来源</div>
              <div style="margin-top: 10px">
                <a>营销中心-我的活动</a>
              </div>
            </div>
          </div>
          <div v-else class="empt-box">
            <img src="~@/assets/img/website/kong.png" alt="">
            <div class="empt-text">请选择需要编辑的字段</div>
          </div>
        </div>
        <div class="pl24" v-if="rightData.listFlag && rightData.rightContent.type == 12">
          <p class="opertate-edit-sub-tip">2、勾选的字段为学员在微官网报名时必填的内容</p>
          <p class="opertate-edit-sub-tip mb16">（温馨提示：填写项过多可能会影响学员报名）</p>
          <div class="mb8">
            <a-checkbox v-model="rightData.rightContent.studentInfo.nameFlag" :disabled="true">学生姓名</a-checkbox>
          </div>
          <div class="mb8">
            <a-checkbox v-model="rightData.rightContent.studentInfo.phoneFlag" :disabled="true">手机号</a-checkbox>
          </div>
          <div class="mb8">
            <a-checkbox
              v-model="rightData.rightContent.studentInfo.courseInfo.flag"
              :disabled="true"
            >意向课程</a-checkbox
            >
          </div>
          <div class="intention-type-box">
            <a-radio-group v-model="rightData.rightContent.studentInfo.courseInfo.type">
              <a-radio
                :style="radioStyle"
                :value="1"
              >输入框 <span style="font-size: 12px">（学员自行填入意向课程）</span>
              </a-radio>
              <a-radio
                :style="radioStyle"
                :value="2"
              >选择器 <span style="font-size: 12px">（机构提供固定选项）</span>
              </a-radio>
            </a-radio-group>
            <template v-if="rightData.rightContent.studentInfo.courseInfo.type == 2">
              <div
                class="intention-course-item"
                v-for="(item, index) in rightData.rightContent.studentInfo.courseInfo.selector"
                :key="index"
              >
                <a-input placeholder="请输入意向课程名称" :maxLength="10" v-model="item.name" />
                <img src="~@/assets/img/website/create/delete.png" alt="" @click="deleteCourse(index)" />
              </div>
              <div class="add-course-btn" @click="addCourse">
                +添加意向课程 {{ rightData.rightContent.studentInfo.courseInfo.selector.length }}/10
              </div>
            </template>
          </div>
          <div class="mb8">
            <!-- v-model="rightData.rightContent.studentInfo.genderFlag" -->
            <a-checkbox v-model="rightData.rightContent.studentInfo.genderFlag" @change="infoChange($event,1)">性别</a-checkbox>
          </div>
          <div class="mb8">
            <a-checkbox v-model="rightData.rightContent.studentInfo.ageFlag" @change="infoChange($event,2)">年龄</a-checkbox>
          </div>
          <div class="mb8">
            <a-checkbox v-model="rightData.rightContent.studentInfo.birthdayFlag" @change="infoChange($event,3)">出生年月</a-checkbox>
          </div>
          <div class="mb8">
            <a-checkbox v-model="rightData.rightContent.studentInfo.schoolFlag" @change="infoChange($event,4)">在读学校</a-checkbox>
          </div>
          <div class="mb8" style="padding-bottom: 20px">
            <a-checkbox v-model="rightData.rightContent.studentInfo.gradeFlag" @change="infoChange($event,5)">年级</a-checkbox>
          </div>
        </div>
      </div>
    </div>
    <edit-address ref="editAddress" @finish="finishAddress" />
    <a-modal
      title="选择背景音乐"
      :visible="musicVisible"
      @cancel="musicClose"
      :footer="null"
      :bodyStyle="{ 'max-height': '70vh', 'overflow-y': 'auto', padding: '24px' }"
      :width="600"
    >
      <div style="display: flex; justify-content: flex-start">
        <div class="music-preview-box">
          <div class="music-preview-box-header">微官网</div>
          <img src="~@/assets/img/website/24.png" alt="" class="music-icon" v-if="weSiteData.musicUrl" />
          <div style="position: absolute">
            <audio :src="weSiteData.musicUrl" autoplay="autoplay" ref="audio"/>
          </div>
        </div>
        <div class="select-modal-side-right">
          <a-radio-group v-model="value">
            <a-radio-button value="a"> 音乐库 </a-radio-button>
          </a-radio-group>
          <div class="music-bank-content">
            <div
              class="music-bank-item"
              :class="index % 2 == 0 ? '' : 'bg-color'"
              v-for="(item, index) in musicArr"
              :key="index"
              @click="selectedMusic(item, index)"
            >
              <div style="display: flex; justify-content: space-between; align-items: center">
                <div style="width: 60px" v-if="index > 0">
                  <span :class="index % 2 == 0 ? 'music-tag1' : 'music-tag'">{{ item.tag }}</span>
                </div>
                <div class="music-name" :class="index == 0 ? 'ml60' : ''">{{ item.name }}</div>
              </div>
              <div v-if="index == activeIndex">
                <a-icon type="check" style="color: #ff8534" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  uploadPic,
  introGetSetting,
  websiteList,
  environmentGetSetting,
  activitieList,
  setWebsite,
  getSettingWebsite,
  getMusicList,
  getImgUrl
} from '@/api/websiteCreate'

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import draggable from 'vuedraggable'
import editAddress from '@/components/addressMap'
import moment from 'moment'
import countdown from '@/components/websiteCountdown'
// import CountDown from '@/components/CountDown/CountDown.vue'
export default {
  components: { swiper, swiperSlide, draggable, editAddress, countdown },
  watch: {
    'weSiteData.title': {
      deep: true, // 深度监听设置为 true
      handler (newV, oldV) {
        if (newV == '') {
          this.weSiteData.title = this.$store.state.user.school_name
        }
      }
    }
  },
  data () {
    return {
      count: 0,
      musicVisible: false,
      value: 'a',
      musicArr: [
        {
          name: '无背景音乐',
          url: ''
        }
      ],
      activeIndex: 0,
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      swiperOption: {
        loop: false,
        loopAdditionalSlides: 3,
        slidesPerview: 1,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        speed: 1000,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: '.swiper-pagination'
          // clickable: true //允许分页点击跳转
        }
      },
      navigationTag: [
        {
          type: 1,
          url: require('@/assets/img/website/create/1.png'),
          name: '轮播图',
          flag: false // 是否添加了组件
        },
        {
          type: 2,
          url: require('@/assets/img/website/create/2.png'),
          name: '图文导航',
          flag: false
        },
        {
          type: 3,
          url: require('@/assets/img/website/create/3.png'),
          name: '地址信息',
          flag: false
        }
      ],
      orgazinTag: [
        {
          type: 4,
          url: require('@/assets/img/website/create/4.png'),
          name: '品牌介绍',
          flag: false
        },
        {
          type: 5,
          url: require('@/assets/img/website/create/5.png'),
          name: '热门课程',
          flag: false
        },
        {
          type: 6,
          url: require('@/assets/img/website/create/6.png'),
          name: '师资团队',
          flag: false
        },
        {
          type: 7,
          url: require('@/assets/img/website/create/7.png'),
          name: '明星学员',
          flag: false
        },
        {
          type: 8,
          url: require('@/assets/img/website/create/8.png'),
          name: '校区环境',
          flag: false
        },
        {
          type: 9,
          url: require('@/assets/img/website/create/9.png'),
          name: '活动风采',
          flag: false
        },
        {
          type: 10,
          url: require('@/assets/img/website/create/10.png'),
          name: '学习资料',
          flag: false
        },
        {
          type: 11,
          url: require('@/assets/img/website/create/11.png'),
          name: '新闻动态',
          flag: false
        }
      ],
      MarketingTag: [
        {
          type: 12,
          url: require('@/assets/img/website/create/12.png'),
          name: '预约试听',
          flag: false
        },
        {
          type: 13,
          url: require('@/assets/img/website/create/13.png'),
          name: '优惠活动',
          flag: false
        }
      ],
      weSiteData: {
        title: '',
        showData: [
          // {
          //   type:1,//类型  轮播图
          //   rotationChart:[]
          // }
        ],
        musicUrl: ''
      },
      listIndex: undefined,
      rightData: {
        titleFalg: false, // 控制标题在右侧是否显示
        title: '',
        rightContent: {},
        listFlag: false // 控制导航信息等 在右侧是否
      },
      rightNavSet: [
        {
          title: '品牌介绍',
          url: require('@/assets/img/website/3.png'),
          status: true,
          type: 4
        },
        {
          title: '热门课程',
          url: require('@/assets/img/website/4.png'),
          status: true,
          type: 5
        },
        {
          title: '师资团队',
          url: require('@/assets/img/website/5.png'),
          status: true,
          type: 6
        },
        {
          title: '明星学员',
          url: require('@/assets/img/website/6.png'),
          status: true,
          type: 7
        },
        {
          title: '校区环境',
          url: require('@/assets/img/website/7.png'),
          status: false,
          type: 8
        },
        {
          title: '活动风采',
          url: require('@/assets/img/website/8.png'),
          status: false,
          type: 9
        },
        {
          title: '学习资料',
          url: require('@/assets/img/website/21.png'),
          status: false,
          type: 10
        },
        {
          title: '新闻动态',
          url: require('@/assets/img/website/9.png'),
          status: false,
          type: 11
        }
      ],
      visible: false,
      school_id: this.$store.state.user.school,
      iconImgUrl: undefined
    }
  },
  created () {
    getSettingWebsite({ school_id: this.$store.state.user.school, key: 'website' })
      .then((res) => {
        const copyObj = JSON.stringify(res.value)
        if (copyObj != '{}') {
          this.weSiteData = res.value
          if (this.weSiteData.showData.length > 0) {
            this.weSiteData.showData.forEach((item) => {
              this.navigationTag.forEach((val) => {
                if (item.type == val.type) {
                  val.flag = true
                }
              })
            })
            this.weSiteData.showData.forEach((item) => {
              this.orgazinTag.forEach((val) => {
                if (item.type == val.type) {
                  val.flag = true
                }
              })
            })

            this.weSiteData.showData.forEach((item) => {
              this.MarketingTag.forEach((val) => {
                if (item.type == val.type) {
                  val.flag = true
                }
              })
            })
            this.weSiteData.showData.forEach((item) => {
              if (item.type == 2) {
                this.rightNavSet.forEach(val => {
                  let isTrue = false
                  item.navigationList.forEach(n => {
                    if (val.type == n.type) {
                      isTrue = true
                    }
                  })
                  val.status = isTrue
                })
              }
            })
          }
          // 背景音乐
          getMusicList()
            .then((res) => {
              const arr = JSON.parse(JSON.stringify(res))
              arr.forEach((item) => {
                this.musicArr.push(item)
              })
              this.musicArr.forEach((item, index) => {
                if (item.url == this.weSiteData.musicUrl) {
                  this.activeIndex = index
                }
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '获取失败')
            })
        }
      })
      .catch((err) => {
        this.$message.error(err.data.message || '获取失败')
      })
    this.getrightNavSetUrl()
  },
  mounted () {},
  methods: {
    musicClose () {
      if (this.weSiteData.musicUrl && this.weSiteData.musicUrl != '') {
        this.$refs.audio.pause()
      }
      this.musicVisible = false
    },
    getrightNavSetUrl () {
      getImgUrl().then(res => {
        this.iconImgUrl = res
        this.rightNavSet.forEach((item, index) => {
          item.url = res[index + 4]
        })
      })
    },
    infoChange (e, type) {
      this.count = 0
      for (const key in this.rightData.rightContent.studentInfo) {
        if (this.rightData.rightContent.studentInfo[key] == true) {
          this.count++
          if (this.count == 5) {
            if (type == 1) {
              this.rightData.rightContent.studentInfo.genderFlag = false
            }
            if (type == 2) {
              this.rightData.rightContent.studentInfo.ageFlag = false
            }
            if (type == 3) {
              this.rightData.rightContent.studentInfo.birthdayFlag = false
            }
            if (type == 4) {
              this.rightData.rightContent.studentInfo.schoolFlag = false
            }
            if (type == 5) {
              this.rightData.rightContent.studentInfo.gradeFlag = false
            }
            this.$message.warning('最多可设置5项')
            return
          }
        }
      }
      // console.log(this.rightData.rightContent.studentInfo,this.count);
    },
    onEndHandle2 () {},
    moment,
    onEnd (e) {
      this.listIndex = e.newIndex
    },
    leftTagClick (data) {
      if (data.flag == false) {
        data.flag = true
        if (data.type == 1) {
          this.weSiteData.showData.push({
            type: data.type, // 类型  轮播图
            rotationChart: []
          })
        }
        if (data.type == 2) {
          this.weSiteData.showData.push({
            type: data.type,
            navigationList: [
              {
                title: '品牌介绍',
                url: this.iconImgUrl[4],
                type: 4
              },
              {
                title: '热门课程',
                url: this.iconImgUrl[5],
                type: 5
              },
              {
                title: '师资团队',
                url: this.iconImgUrl[6],
                type: 6
              },
              {
                title: '明星学员',
                url: this.iconImgUrl[7],
                type: 7
              }
            ]
          })
        }
        if (data.type == 3) {
          this.weSiteData.showData.push({
            type: data.type,
            addressInfo: {
              street: '空港国际城5期',
              address: '四川省成都市双流区',
              banner: require('@/assets/img/website/create/touxiang.jpg'),
              contactPhone: '400-6677-456',
              name: '大耳狐教育',
              lat: 30.571898,
              lng: 104.009659,
              subCampus: [],
              isDefaultLogo: true
            }
          })
        }
        if (data.type == 4) {
          introGetSetting({ school_id: this.school_id, key: 'brand_introduction' })
            .then((res) => {
              this.weSiteData.showData.push({
                type: data.type,
                introInfo: res.value,
                name: data.name
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '品牌设置获取失败')
            })
        }
        if (data.type == 5) {
          websiteList({ school_id: this.school_id, type: 1, pageSize: 10, is_enable: 1 })
            .then((res) => {
              const parmars = JSON.parse(JSON.stringify(res.data))
              this.weSiteData.showData.push({
                type: data.type,
                hotCourse: parmars,
                name: data.name,
                showIntroFlag: true,
                showNumber: 2
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '热门课程设置获取失败')
            })
        }
        if (data.type == 6) {
          websiteList({ school_id: this.school_id, type: 2, pageSize: 10, is_enable: 1 })
            .then((res) => {
              const parmars = JSON.parse(JSON.stringify(res.data))
              this.weSiteData.showData.push({
                type: data.type,
                teacherTeam: parmars,
                name: data.name,
                showIntroFlag: true,
                showNumber: 2
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '师资团队设置获取失败')
            })
        }
        if (data.type == 7) {
          websiteList({ school_id: this.school_id, type: 3, pageSize: 10, is_enable: 1 })
            .then((res) => {
              const parmars = JSON.parse(JSON.stringify(res.data))
              this.weSiteData.showData.push({
                type: data.type,
                statStudent: parmars,
                name: data.name,
                showIntroFlag: true,
                showNumber: 2
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '明星学员设置获取失败')
            })
        }
        if (data.type == 8) {
          environmentGetSetting({ school_id: this.school_id, key: 'environment' })
            .then((res) => {
              this.weSiteData.showData.push({
                type: data.type,
                schoolEnvironment: res.value,
                name: data.name
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '校区环境设置获取失败')
            })
        }
        if (data.type == 9) {
          websiteList({ school_id: this.school_id, type: 4, pageSize: 10, is_enable: 1 })
            .then((res) => {
              const parmars = JSON.parse(JSON.stringify(res.data))
              this.weSiteData.showData.push({
                type: data.type,
                elegantActivities: parmars,
                name: data.name,
                showIntroFlag: true,
                showNumber: 2
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '活动风采设置获取失败')
            })
        }
        if (data.type == 10) {
          websiteList({ school_id: this.school_id, type: 5, pageSize: 10, is_enable: 1 })
            .then((res) => {
              const parmars = JSON.parse(JSON.stringify(res.data))
              this.weSiteData.showData.push({
                type: data.type,
                LearningMaterials: parmars,
                name: data.name,
                showIntroFlag: true,
                showNumber: 2
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '学习资料设置获取失败')
            })
        }
        if (data.type == 11) {
          websiteList({ school_id: this.school_id, type: 6, pageSize: 10, is_enable: 1 })
            .then((res) => {
              const parmars = JSON.parse(JSON.stringify(res.data))
              this.weSiteData.showData.push({
                type: data.type,
                newsInfo: parmars,
                name: data.name,
                showIntroFlag: true,
                showNumber: 2
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '新闻动态设置获取失败')
            })
        }
        if (data.type == 12) {
          this.weSiteData.showData.push({
            type: data.type, // 类型  轮播图
            btnText: '预约试听',
            bottomStyle: true, // 小程序底部悬浮展示”预约试听“入口
            giftToShopFlag: false, // 到店开关
            giftToShopText: '',
            auditionFlag: false, // 试听开关
            auditionText: '',
            fullReductionFlag: false, // 满减开关
            fullReductionText: '',
            studentInfo: {
              nameFlag: true,
              phoneFlag: true,
              courseInfo: {
                flag: true,
                type: 1, // 1输入框 2机构固定选项
                selector: [
                  {
                    name: ''
                  }
                ]
              }
            }
          })
        }
        if (data.type == 13) {
          activitieList({ school_id: this.school_id, is_release: 1, is_end: 2, pageSize: 10 })
            .then((res) => {
              const parmars = JSON.parse(JSON.stringify(res.data))

              // if (parmars.length > 0) {
              //   parmars.forEach((item) => {
              //     item.end_time=new Date(item.end_time)
              //     item.start_time=new Date(item.start_time)
              //     console.log(item.end_time - item.start_time); // 毫秒数
              //     console.log(Math.floor((item.end_time - item.start_time) / 1000 / 60 / 60 / 24))
              //     debugger
              //   })
              // }
              this.weSiteData.showData.push({
                type: data.type,
                activities: parmars,
                name: '优惠活动',
                showNumber: 2
              })
            })
            .catch((err) => {
              this.$message.error(err.data.message || '活动获取失败')
            })
          // this.weSiteData.showData.push()
        }
      } else {
        this.$message.warning('该组件已添加')
      }
    },

    changeTitle () {
      //  console.log(this.$store.state);
      this.rightData.title = this.weSiteData.title
      this.rightData.titleFalg = true // 控制标题在右侧是否显示
      this.listFlag = false // 控制导航信息等 在右侧是否
      this.listIndex = 10000
      this.$forceUpdate()
      // console.log(this.wegSiteData.rightData.title);
    },
    titleChange () {
      this.weSiteData.title = this.rightData.title
    },
    inputBlur () {
      if (this.rightData.title == '') this.rightData.title = this.weSiteData.title
    },
    listClick (data, index) {
      this.rightData.titleFalg = false
      this.listIndex = index
      this.rightData.listFlag = true
      this.rightData.rightContent = data
      console.log(this.weSiteData.showData, 'dd', this.rightData.rightContent)
    },
    deleteList (data, index) {
      this.weSiteData.showData.splice(index, 1)
      if (data.type == 1 || data.type == 2 || data.type == 3) {
        this.navigationTag.forEach((item) => {
          if (item.type == data.type) {
            item.flag = false
          }
        })
      } else if (data.type == 12 || data.type == 13) {
        this.MarketingTag.forEach((item) => {
          if (item.type == data.type) {
            item.flag = false
          }
        })
      } else {
        this.orgazinTag.forEach((item) => {
          if (item.type == data.type) {
            item.flag = false
          }
        })
      }
      this.listIndex = undefined
      this.rightData.listFlag = false
      this.rightData.rightContent = {}
      // console.log(this.rightData.rightContent)
    },
    beforeUpload (file) {
      // file=file.raw
      // console.log(file);
      // return
      const testImg = ['image/jpeg', 'image/png', 'image/gif', 'image/svg', 'image/jpg']
      if (testImg.indexOf(file.type) == -1) {
        this.$message.warning('请上传图片!')
        return
      }
      const size = 1025 * 1024 * 5
      if (file.size > size) {
        this.$message.warning('图片不能大于5M!')
        return
      }
      if (this.rightData.rightContent.rotationChart.length > 4) {
        this.$message.warning('最多可添加5张!')
        return
      }
      const formData = new FormData()
      formData.append('school_id', this.$store.state.user.school)
      formData.append('file', file)
      uploadPic(formData)
        .then((res) => {
          this.rightData.rightContent.rotationChart.push({
            url: res.url
          })
          this.$message.success('上传成功')
          // console.log(this.weSiteData.showData)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败')
        })
      return false
    },
    beforeUploadAvatar (file) {
      const testImg = ['image/jpeg', 'image/png', 'image/gif', 'image/svg', 'image/jpg']
      if (testImg.indexOf(file.type) == -1) {
        this.$message.warning('请上传图片!')
        return
      }
      const size = 1025 * 1024 * 5
      if (file.size > size) {
        this.$message.warning('图片不能大于5M!')
        return
      }
      const formData = new FormData()
      formData.append('school_id', this.$store.state.user.school)
      formData.append('file', file)
      uploadPic(formData)
        .then((res) => {
          this.rightData.rightContent.addressInfo.banner = res.url
          this.rightData.rightContent.addressInfo.isDefaultLogo = false
          this.$message.success('上传成功')
          console.log(this.weSiteData.showData)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败')
        })
      return false
    },
    deleteSwiperItem (data, index) {
      this.rightData.rightContent.rotationChart.splice(index, 1)
    },
    navSetClick (data, index) {
      if (data.status) {
        this.$message.warning('已添加' + data.title)
        return
      }
      data.status = true
      this.rightData.rightContent.navigationList = []
      this.rightNavSet.forEach((item) => {
        if (item.status) {
          this.rightData.rightContent.navigationList.push({
            title: item.title,
            url: item.url,
            type: item.type
          })
        }
      })
    },
    deleteNavList (data, index) {
      this.rightData.rightContent.navigationList.splice(index, 1)
      //  this.rightData.rightContent.navigationList.forEach((item,index)=>{
      //     if()
      //  })
      this.rightNavSet.forEach((item) => {
        if (item.title == data.title) {
          item.status = false
        }
      })
    },
    addSchool () {
      if (this.rightData.rightContent.addressInfo.subCampus.length < 4) {
        this.rightData.rightContent.addressInfo.subCampus.push({
          name: '',
          contactPhone: '',
          address: '',
          street: ''
        })
      }

      // console.log(this.rightData.rightContent);
    },
    delSchool (data, index) {
      this.rightData.rightContent.addressInfo.subCampus.splice(index, 1)
    },
    editAddress (data, type, index = undefined) {
      // console.log(data,type,index = undefined)
      if (index != undefined) {
        this.$refs.editAddress.index = index
      }
      this.$refs.editAddress.type = type
      this.$refs.editAddress.showModel(data)
      // if(data.lat){
      //    this.$refs.editAddress.lat=data.lat
      //    this.$refs.editAddress.lng=data.lng
      // }
      // if (index != undefined) {
      //   this.$refs.editAddress.index = index
      // }
      // this.$refs.editAddress.type = type
      // if (data.address != '') {
      //   let addressStreet = data.address + data.street
      //   this.$refs.editAddress.showModel(addressStreet, data.street)
      // } else {
      //   this.$refs.editAddress.showModel()
      // }
    },
    finishAddress (e) {
      if (e.type == 1) {
        this.rightData.rightContent.addressInfo.address = e.province + e.city + e.area
        this.rightData.rightContent.addressInfo.street = e.street
        this.rightData.rightContent.addressInfo.lat = e.lat
        this.rightData.rightContent.addressInfo.lng = e.lng
      } else {
        this.rightData.rightContent.addressInfo.subCampus[e.index].address = e.province + e.city + e.area
        this.rightData.rightContent.addressInfo.subCampus[e.index].street = e.street
        this.rightData.rightContent.addressInfo.subCampus[e.index].lat = e.lat
        this.rightData.rightContent.addressInfo.subCampus[e.index].lng = e.lng
      }
      console.log(this.rightData.rightContent)
    },
    intortitleChange () {
      this.rightNavSet.forEach((item) => {
        if (item.type == this.rightData.rightContent.type) {
          this.$nextTick(() => {
            item.title = this.rightData.rightContent.name
          })
        }
      })
      this.weSiteData.showData.forEach((item) => {
        if (item.type == 2) {
          item.navigationList.forEach((val) => {
            if (val.type == this.rightData.rightContent.type) {
              this.$nextTick(() => {
                val.title = this.rightData.rightContent.name
              })
            }
          })
        }
      })
      this.$forceUpdate()
      // console.log(this.rightNavSet);
    },

    intorBlur (type) {
      if (type == 7) {
        if (this.rightData.rightContent.name == '') {
          this.rightData.rightContent.name = '明星学员'
        }
      }
      if (type == 8) {
        if (this.rightData.rightContent.name == '') {
          this.rightData.rightContent.name = '校区环境'
        }
      }
      if (type == 9) {
        if (this.rightData.rightContent.name == '') {
          this.rightData.rightContent.name = '活动风采'
        }
      }
      if (type == 10) {
        if (this.rightData.rightContent.name == '') {
          this.rightData.rightContent.name = '学习资料'
        }
      }
      if (type == 11) {
        if (this.rightData.rightContent.name == '') {
          this.rightData.rightContent.name = '新闻动态'
        }
      }
      if (type == 12) {
        if (this.rightData.rightContent.btnText == '') {
          this.rightData.rightContent.btnText = '预约试听'
        }
      }
      if (type == 13) {
        if (this.rightData.rightContent.name == '') {
          this.rightData.rightContent.name = '优惠活动'
        }
      }
    },
    introChange (e) {
      this.rightData.rightContent.showIntroFlag = e.target.checked
      console.log(e.target.checked)
    },
    showNumberChange () {
      console.log(this.rightData.rightContent.showNumber)
      if (this.rightData.rightContent.showNumber == null) {
        this.rightData.rightContent.showNumber = 2
      }
    },
    addCourse () {
      if (this.rightData.rightContent.studentInfo.courseInfo.selector.length == 10) {
        this.$message.warning('最多添加10项')
        return
      }
      this.rightData.rightContent.studentInfo.courseInfo.selector.push({
        name: ''
      })
    },
    deleteCourse (index) {
      if (this.rightData.rightContent.studentInfo.courseInfo.selector.length == 1) {
        this.$message.warning('至少添加一项')
        return
      }
      this.rightData.rightContent.studentInfo.courseInfo.selector.splice(index, 1)
    },
    saveWebsite () {
      setWebsite({ school_id: this.school_id, key: 'website', value: this.weSiteData })
        .then((res) => {
          this.$message.success('保存成功')
          this.$router.go(-1)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '保存失败')
        })
    },
    openMusic () {
      this.musicVisible = true
      if (this.weSiteData.musicUrl && this.weSiteData.musicUrl != '') {
        this.$nextTick(()=>{
          this.$refs.audio.play()
        })
      }
      
    },
    selectedMusic (data, index) {
      this.activeIndex = index
      this.weSiteData.musicUrl = data.url
    },
    handerTab (selRadio) {
      this.$router.push({
        name: 'websiteOrganizationInfo',
        query: {
          selRadio: selRadio
        }
      })
    }
  }
}
</script>
<style>
.ant-upload.ant-upload-select-picture-card {
  width: 80px !important;
  height: 80px !important;
  margin-bottom: 1px !important;
}
p {
  margin: 0;
}
</style>
<style lang="less" scoped>
@import '~@/assets/img/customFormIcon/iconfont.css';
.mb16 {
  margin-bottom: 16px;
}
.mt16 {
  margin-top: 16px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb8 {
  margin-bottom: 8px;
}
.pl24 {
  padding-left: 24px;
}
.disabled {
  color: #e8e8e8 !important;
}
.center-hd-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.eform-page-header {
  height: 50px;
  line-height: 50px;
  background: #242b49;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  .hd-left {
    display: flex;
    align-items: center;
    .icon-pic {
      font-size: 30px;
      margin-right: 3px;
      cursor: pointer;
      color: #FFFFFF;
    }
    .eform-back-title {
      color: #fff;
      font-size: 15px;
      &:before {
        content: '';
        border-left: 1px solid hsla(0, 0%, 100%, 0.4);
        margin-right: 12px;
      }
    }
  }
}
.container-box {
  display: flex;
  background: #f4f6fa;
  .left-container {
    box-sizing: border-box;
    width: 320px;
    background: #fff;
    position: relative;
    padding-top: 24px;
    .scroll-y {
      overflow: auto;
      height: calc(100vh - 50px);
      .navigation-title {
        font-size: 16px;
        color: rgb(51, 51, 51);
        font-weight: 500;
        margin: 0 0px 26px 24px;
      }
    }
    .component-choose-page {
      height: calc(100vh - 50px);
      overflow: auto;
    }
  }
  .center-container {
    overflow: auto;
    height: calc(100vh - 50px);
    overflow: auto;
    padding: 24px 0;
    flex: 1;
    box-sizing: border-box;
    // display: flex;
    .center-content {
      width: 375px;
      min-height: 667px;
      margin: 0 auto;
      box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
      padding-bottom: 45px;
      .choose {
        border: 2px dashed #fc9c6b;
      }
    }
  }
  .create-site-side-right {
    width: 300px;
    background: #fff;
    overflow: auto;
    height: calc(100vh - 50px);
    padding-top: 24px;
  }
  .intention-type-box {
    // width: 300px;
    background: rgba(244, 246, 250, 0.5);
    padding-left: 24px;
    margin-bottom: 10px;
    color: #333;
    .intention-course-item {
      display: flex;
      input {
        width: 190px;
        height: 32px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #e8e8e8;
        margin-bottom: 8px;
      }
      img {
        width: 18px;
        height: 18px;
        border-radius: 2px;
        margin-left: 10px;
        margin-top: 6px;
      }
    }
    .add-course-btn {
      width: 190px;
      height: 32px;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #e8e8e8;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1890ff;
      line-height: 32px;
      text-align: center;
    }
  }
}
.choose-item {
  display: inline-block;
  width: 33%;
  text-align: center;
  cursor: pointer;
  margin-bottom: 32px;
}
.choose-item-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.choose-item-name {
  font-size: 14px;
  color: #9a9da7;
  line-height: 20px;
  margin-top: 16px;
}
.view-area-title {
  background-image: url('~@/assets/img/website/phone-title.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 375px;
  height: 64px;
  background-position: 50%;
  position: relative;
  color: #fff;
  padding-top: 28px;
  padding-left: 16px;
  font-size: 18px;
  box-sizing: border-box;
}
.operate-component {
  padding: 0 24px;
  .empt-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    img{
      width: 44px;
    height: 44px;
    margin-top: 149px;
    margin-bottom: 10px;
    }
    .empt-text{
    font-size: 15px;
    color: #666;
    }
  }
  .operate-edit-title {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin-bottom: 24px !important;
  }
  .edit-title-input-box {
    margin-bottom: 24px;
  }
  .operate-edit-subtitle {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .opertate-edit-sub-tip {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
    line-height: 17px;
  }
  .opertate-edit-tip {
    font-size: 14px;
    color: #999;
    line-height: 20px;
  }
  .swiper-edit-scroll {
    padding: 8px 24px;
    .opertate-edit-tip {
      font-size: 14px;
      color: #999;
      line-height: 20px;
    }
    .swiper-image-content {
      height: 78px;
      width: 223px;
      position: relative;
      .swiper-image {
        height: 100%;
        width: 100%;
        border-radius: 4px;
      }
    }
    .add-swiper-image {
      border: 1px dashed #e8e8e8;
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #1890ff;
      position: relative;
      border-radius: 4px;
      width: 223px;
      cursor: pointer;
    }
  }
  .nav-set {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .info-edit-content {
    .inst-item {
      position: relative;
      margin-bottom: 12px;
      width: 223px;
      height: 84px;
      border-radius: 4px;
      border: 1px solid #e8e8e8;
      padding: 20px 12px;
      &:hover {
        cursor: move;
      }
      .inst-item-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        img {
          width: 44px;
          height: 44px;
          margin-right: 8px;
        }
      }
    }
  }
  .inst-avatar {
    margin-bottom: 15px;
    .upload-avatar {
      // width: 54px;
      // height: 54px;
      margin-top: 8px;
      margin-bottom: 10px;
    }
  }
  .subcampus-item {
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    margin-top: 24px;
    .subcampus-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 28px;
      background: #f4f6fa;
      border-radius: 4px 4px 0 0;
      padding: 0 12px;
      .campus-del {
        color: #58b7ef;
        cursor: pointer;
      }
    }
    .subcampus-content {
      padding: 0 12px 12px;
    }
  }
  .add-sub-inst-address-btn {
    width: 252px;
    height: 32px;
    border-radius: 4px;
    border: 1px dashed #e8e8e8;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1890ff;
    line-height: 32px;
    text-align: center;
    margin: 0 auto;
    margin-top: 24px;
    cursor: pointer;
  }
}
.view-item-wrapper {
  position: relative;
  background: transparent;
  .choose {
    border: 2px dashed #fc9c6b;
    position: relative;
  }
  .under-item-image {
    width: 375px;
    height: 99px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .view-area-item-new {
    z-index: 1;
    padding: 0 16px;
    width: 100%;
    position: relative;
    &:hover {
      cursor: move;
    }
    .swiper-image-component {
      border-radius: 8px;
      box-sizing: border-box;
      overflow: hidden;
      .carousal-content {
        height: 120px;
        background: #fafafa;
        position: relative;
        .no-content {
          position: absolute;
          left: 0;
          right: 0;
        }
        .carousel-list {
          width: 100%;
          position: relative;
          height: 120px;
          overflow: hidden;
        }
      }
    }
    .graphic-component {
      background: #fff;
      border-radius: 8px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      padding-top: 16px;
      .graphic-item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 20px;
        img {
          width: 40px;
          height: 40px;
          margin-bottom: 8px;
        }
        .text {
          font-size: 13px;
          font-weight: 400;
          color: #394655;
          line-height: 18px;
        }
      }
    }
    .address-component {
      min-height: 83px;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
      .address-component-content {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px 16px 19px;
        background: #fff;
        .address-image {
          width: 44px;
          height: 44px;
          background: #e7ebef;
          border-radius: 5px;
          margin-right: 18px;
        }
        .address-component-right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 249px;
          .inst-name {
            width: 225px;
            font-size: 17px;
            color: #394655;
            line-height: 24px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-bottom: 2px;
          }
          .inst-address {
            width: 225px;
            font-size: 13px;
            color: #999;
            line-height: 18px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
      }
      .learn-more {
        width: 74px;
        height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #96a1ae;
        line-height: 18px;
        margin: 0 auto;
        margin-bottom: 10px;
        margin-top: -10px;
      }
    }
    .image-text-component {
      background-color: #fff;
      border-radius: 5px;
      position: relative;
      padding: 0 15px;
      .image-box {
        margin-top: 10px;
      }
      .image-text-desc {
        font-size: 15px;
        font-weight: 400;
        color: #96a1ae;
        line-height: 21px;
        text-overflow: ellipsis;
        width: 311px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 10px;
        padding-bottom: 10px;
      }
      .victoria-list {
        .victoria-list-item {
          height: 104px;
          padding: 12px 16px;
          display: flex;
          img {
            width: 80px;
            height: 80px;
            margin-right: 12px;
            border-radius: 8px;
          }
          .content-one {
            flex: 1;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #394655;
            line-height: 21px;
            // margin-bottom: 14px;
            .title {
              width: 100%;
              // text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              // line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .other {
              margin-top: 15px;
              color: #1890ff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .more {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                // background: #fff;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(90deg, #fe0140, #ff5728);
                // margin-top: 4px;
              }
            }
          }
        }
      }
    }
    .hot-course-component {
      background: #fff;
      border-radius: 5px;
      padding: 0 15px;
      position: relative;
      .hot-course-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .hot-course-content {
        margin-top: 10px;
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        img {
          width: 80px;
          height: 80px;
          background: #e6e6e6;
          border-radius: 5px;
          margin-right: 12px;
        }
        .hot-course-desc {
          flex: 1;
          .name {
            font-size: 15px;
            font-weight: 400;
            color: #394655;
            line-height: 21px;
            max-width: 217px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .news-name {
            font-size: 15px;
            font-weight: 400;
            color: #394655;
            line-height: 21px;
            width: 217px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
          .intro {
            width: 217px;
            height: 18px;
            font-size: 13px;
            font-weight: 400;
            color: #96a1ae;
            line-height: 18px;
            margin-top: 4px;
            margin-bottom: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .many-intro {
            width: 217px;
            font-size: 13px;
            font-weight: 400;
            color: #96a1ae;
            line-height: 18px;
            margin-top: 4px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            overflow: hidden;
            -webkit-box-orient: vertical /*! autoprefixer: on */;
          }
        }
      }
    }
    .teacher-team-component {
      background: #fff;
      border-radius: 5px;
      padding: 0 15px;
      position: relative;
      .teacher-team-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-top: 10px;
        .teacher-team-item {
          width: 151px;
          height: 254px;
          border-radius: 5px;
          overflow: hidden;
          background: #fff;
          padding-bottom: 16px;
          .teacher-item-img {
            width: 165px;
            height: 165px;
          }
          .teacher-item-name {
            font-size: 15px;
            // padding: 0 12px;
            font-weight: 400;
            color: #394655;
            line-height: 21px;
            margin-top: 12px;
            width: 165px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .teacher-item-desc {
            width: 141px;
            margin-top: 6px;
            font-size: 13px;
            font-weight: 400;
            color: #96a1ae;
            line-height: 18px;
            // margin: 0 auto;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical /*! autoprefixer: on */;
          }
        }
      }
    }
    .active-component {
      background: #fff;
      border-radius: 5px;
      padding: 0 15px;
      position: relative;
      .activity-view-item {
        height: 213px;
        padding: 12px 0 16px;
        img {
          width: 311px;
          height: 156px;
          border-radius: 5px;
          margin-bottom: 8px;
        }
        .activity-view-name {
          font-size: 15px;
          font-weight: 400;
          color: #96a1ae;
          line-height: 21px;
          max-width: 311px;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .form-acive {
      margin: 12px 0;
      min-height: 58px !important;
    }
    .form-component-component {
      background: #fff;
      border-radius: 5px;
      padding: 0 15px;
      position: relative;
      min-height: 68px;
      margin: 12px 0;
      display: flex;
      align-items: center;

      .trial {
        width: 100%;
        max-height: 92px;
        background-color: #fff;
        .form-button {
          line-height: 44px;
          font-size: 15px;
          text-align: center;
          font-weight: 400;
          color: #fff;
          margin: 12px auto;
          width: 311px;
          height: 44px;
          border-radius: 22px;
          background: #19be6b;
        }
        .trial-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 0;
          .trial-content-desc {
            .decs-content {
              display: flex;
              margin-bottom: 6px;
              .text {
                width: 16px;
                height: 16px;
                font-size: 11px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fff;
                line-height: 16px;
                margin-right: 4px;
                background: linear-gradient(90deg, #fe0140, #ff5728);
                border-radius: 2px;
                text-align: center;
              }
              .desc {
                max-width: 160px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 16px;
                font-size: 11px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #394655;
                line-height: 16px;
              }
            }
            .decs-content:last-child {
              margin-bottom: 0;
            }
          }
          .trial-content-icon {
            width: 89px;
            height: 26px;
            background: linear-gradient(90deg, #fe0140, #ff5728);
            border-radius: 14px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #fff;
            line-height: 26px;
            display: flex;
            justify-content: space-around;
            padding-left: 12px;
            .more {
              width: 18px;
              height: 18px;
              border-radius: 50%;
              background: #fff;
              color: #ff083f;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 4px;
            }
          }
        }
      }
    }
    .view-actions {
      position: absolute;
      top: 0;
      right: -20px;
      width: 18px;
      .actions-img {
        display: none;
      }
      .delete-actions {
        width: 18px;
        height: 18px;
        margin-top: 5px;
        opacity: 0.5;
        cursor: pointer;
      }
    }
  }
}
.theme-color-line {
  position: absolute;
  width: 70px;
  height: 3px;
  background: #19be6b;
  border-radius: 5px;
  top: 32px;
  // left: 0;
  opacity: 0.6;
}
.image-text-title {
  font-size: 17px;
  font-weight: 500;
  font-family: PingFang SC;
  color: #333333;
  padding: 10px 0;
}
.br-btm {
  border-bottom: 1px solid #e8e8e8;
}
.opertate-edit-sub-tip {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999;
  line-height: 17px;
}
.inst-part-content--empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 160px;
  img {
    width: 88px;
    height: 88px;
  }
}
.website-page-header {
  height: 50px;
  line-height: 50px;
  background: #242b49;
  padding: 0 24px;
  display: flex;
  div {
    flex: 1;
  }
  .hd-left {
    display: flex;
    align-items: center;
    .icon-pic {
      margin-right: 3px;
      font-size: 32px;
      color: #FFFFFF;
      cursor: pointer;
      line-height: 32px;
    }
  }
  .hd-center {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .hd-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.music-preview-box {
  width: 200px;
  height: 356px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background: #f4f6fa;
  margin-left: 16px;
  .music-preview-box-header {
    background-image: url(https://image.xiaomaiketang.com/xm/JfCNBdcDQp.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 100%;
    height: 34px;
    font-weight: 400;
    color: #000;
    line-height: 13px;
    font-size: 10px;
    padding-top: 16px;
    text-align: center;
  }
  .music-icon {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    float: right;
    margin-top: 6px;
    margin-right: 8px;
    opacity: 0.5;
  }
}
.select-modal-side-right {
  margin-left: 16px;
  overflow: auto;
  .music-bank-content {
    border: 1px solid #e8e8e8;
    margin-top: 12px;
    width: 270px;
    max-height: 310px;
    overflow-y: auto;
    .music-bank-item {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .music-name {
        max-width: 180px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.music-tag {
  height: 19px;
  font-size: 12px;
  font-weight: 400;
  color: #3bbdaa;
  padding: 0 8px;
  border: 1px solid #3bbdaa;
  display: inline-block;
}
.music-tag1 {
  height: 19px;
  font-size: 12px;
  font-weight: 400;
  color: #ff4f4f;
  padding: 0 8px;
  border: 1px solid #ff4f4f;
  display: inline-block;
}
.ml60 {
  margin-left: 60px;
}
.bg-color {
  background: #fafafa;
}
</style>
